<template>
	<view class="p_bg_all p_b_128">
		<view class="p_lr_32 p_over" v-if="!isLoaing">
			<view class="wuliu_wrapper" v-if="detailInfo.pay_status == 2">
				<view class="p_flex">
					<view class="p_margin_r_28">
						<view class="p_img_18 p_bg_05b570 p_margin_t_8"></view>
						<view class="line1"></view>
					</view>
					<view class="p_flex_1" v-if="detailInfo.express.time">
						<view class="p_flex9">
							<view class="p_font_24 p_color_05b570">{{detailInfo.express.time}}</view>
							<view class="p_flex2" @click="getLog">
								<view class="p_font_24 p_color_05b570">详细信息</view>
								<image src="https://dy.sykj365.com/uploads/mini/youlv@2x.png" mode="aspectFill"
									class="p_img_32 p_margin_l_8">
								</image>
							</view>
						</view>
						<view class="p_font_28 p_color_7a p_margin_t_8 p_margin_b_32">{{detailInfo.express.context}}
						</view>
					</view>
					<view class="p_flex_1" v-else>
						<view class="p_font_28 p_color_7a p_margin_b_32">物流单号：{{detailInfo.express_num}}</view>
					</view>
				</view>
				<view class="p_flex">
					<view class="p_margin_r_28">
						<view class="line2"></view>
						<view class="p_img_18 p_bg_ececec"></view>
					</view>
					<view class="p_flex_1">
						<view class="p_font_32">{{detailInfo.address}}</view>
						<view class="p_font_28 p_color_7a p_margin_t_8">{{detailInfo.name}}<text
								class="p_margin_l_16">{{(detailInfo.phone).replace(/(\d{3})\d{4}(\d{4})/, "$1****$2")}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="adress_wrapper" v-else>
				<view class="p_flex2 adress_left p_margin_r_32">
					<image src="https://dy.sykj365.com/uploads/mini/shou@2x.png" mode="aspectFill" class="p_img_48"></image>
				</view>
				<view class="p_flex_1">
					<view class="p_font_32">{{detailInfo.address}}</view>
					<view class="p_font_28 p_color_7a p_margin_t_8">{{detailInfo.name}}<text
							class="p_margin_l_16">{{(detailInfo.phone).replace(/(\d{3})\d{4}(\d{4})/, "$1****$2")}}</text>
					</view>
				</view>
				<view class="adress_right p_font_26 p_color_7a"
					v-if="detailInfo.pay_status == 0 || detailInfo.pay_status == 1">
					<view @click="getAddress(detailInfo)">修改</view>
				</view>
			</view>
			<view class="main">
				<view class="p_flex2">
					<view class="p_font_28">订单内容</view>
					<view class="p_font_24 p_color_7a p_margin_l_16">共{{detailInfo.file_num}}个文件</view>
				</view>
				<orderContent :item="item" classMargin="p_margin_tb_48" :priceNum="true" :fileNum="true"
					:isPreview="true" previewLocation="right" v-for="item in detailInfo.cart"></orderContent>
				<view class="p_flex9 p_margin_tb_24">
					<view class="p_font_28">商品总价</view>
					<view class="p_font_28"><text class="p_font_20">¥</text>{{detailInfo.order_price}}</view>
				</view>
				<view class="p_flex9 p_margin_tb_24">
					<view class="p_font_28">运费</view>
					<view class="p_font_28"><text class="p_font_20">¥</text>{{detailInfo.freight}}</view>
				</view>
				<view class="p_flex9 p_margin_tb_24">
					<view class="p_font_28">余额抵扣</view>
					<view class="p_font_28 p_color_ff5555">-<text
							class="p_font_20 p_margin_l_8">¥</text>{{detailInfo.balance}}</view>
				</view>
				<view class="p_flex9 p_margin_tb_24">
					<view class="p_font_28">优惠/折扣券</view>
					<view class="p_font_28 p_color_ff5555">-<text
							class="p_font_20 p_margin_l_8">¥</text>{{detailInfo.ticket_price}}</view>
				</view>
				<view class="p_flex10 p_margin_t_32">
					<view class="p_font_24 p_color_7a">实付金额</view>
					<view class="p_font_32 p_margin_l_8"><text class="p_font_20 p_margin_r_8">¥
						</text>{{detailInfo.total_price}}</view>
				</view>
			</view>
			<view class="order" v-if="detailInfo.remark">
				<view class="p_font_28 p_margin_b_48">订单备注</view>
				<view class="p_margin_t_24 p_font_28">{{detailInfo.remark}}</view>
			</view>
			<view class="order">
				<view class="p_font_28 p_margin_b_48">订单信息</view>
				<view class="p_flex9 p_margin_t_24">
					<view class="p_font_28 p_color_7a">订单状态</view>
					<view class="p_font_28">{{getStatusString(detailInfo.pay_status)}}</view>
				</view>
				<view class="p_flex9 p_margin_t_24">
					<view class="p_font_28 p_color_7a">订单编号</view>
					<view class="p_font_28 p_flex2">{{detailInfo.order_num}}
						<text class="p_font_20 p_copy" v-if="detailInfo.pay_status == 0 && payType != 0"
							@click="getCopyOrder(detailInfo.order_num)">复制</text>
					</view>
				</view>
				<view class="p_flex9 p_margin_t_24">
					<view class="p_font_28 p_color_7a">下单时间</view>
					<view class="p_font_28">{{detailInfo.create_time}}</view>
				</view>
			</view>
		</view>
		<bottomView :btnText1="payType == 0?'立即支付': ''" btnText2="取消订单"
			v-if="detailInfo.pay_status == 0 && payType == 0" @getSubmit="getSubmit1" @getClear="getClear1">
		</bottomView>
		<bottomView btnText1="确认收货" btnText2="查看物流" v-if="detailInfo.pay_status == 2" @getSubmit="getSubmit2"
			@getClear="getLog"></bottomView>
		<bottomView btnText2="申请退款" v-if="detailInfo.pay_status == 3 || detailInfo.pay_status == 5"
			@getClear="getClear3">
			<view class="p_font_24 p_color_fe8f0d p_text_r" v-if="detailInfo.pay_status == 5">退款申请被驳回，可再次申请退款</view>
		</bottomView>
		<bottomView btnText1="微信支付" v-if="detailInfo.pay_status == 0 && payType != 0"
			@getSubmit="getWxPay(detailInfo.order_num)"></bottomView>
		<!--  -->
		<logistics ref="logView" :infoNum="detailInfo.express_num" :infoName="detailInfo.express_name" :isShow="logisShow" :infoId="detailInfo.id" @getClose="logisShow = false"></logistics>
		<!-- 支付 -->
		<pay :wx="true" ref="payView" :isShow="isPayShow" :priceNum="payPrice" @getClose="isPayShow = false"
			@getChoosePay="getChoosePay" @getWxPaySuccess="getWxPaySuccess"></pay>
		<!--  -->
		<tips messages="是否确定取消该订单？" confirmText="确定" cancelText="再想想" :tipsShow="orderIsShow"
			@getDialogCancel="orderIsShow = false" @getDialogConfirm="getCancelOrder(detailInfo)"></tips>
	</view>
</template>

<script>
	import tips from '../../components/tips.vue';
	import logistics from './components/logistics.vue';
	import bottomView from '../../components/bottomView.vue';
	import orderContent from '../../components/orderContent.vue';
	import pay from '../../pages/index/components/pay.vue';

	export default {
		components: {
			pay,
			tips,
			logistics,
			bottomView,
			orderContent
		},
		data() {
			return {
				id: '',
				detailInfo: {},
				logisShow: false,
				isLoaing: true,
				isPayShow: false,
				payPrice: 0,
				orderIsShow: false,
				payType: null,
				isBtn: true,
			}
		},
		onLoad(e) {
			this.id = e.id;
			this.payType = e.payType;
			this.getDetail();
		},
		onShow() {
			if (uni.getStorageSync('orderUp') || uni.getStorageSync('orderUpRefund') || uni.getStorageSync('editAdress')) {
				this.getDetail();
				if(uni.getStorageSync('editAdress')) {
					uni.removeStorageSync('editAdress');
				}
			}
		},
		methods: {
			getDetail() {
				this.$http.post(this.$api.orderDetail, {
					id: this.id
				}).then(res => {
					this.detailInfo = res.data;
					this.isLoaing = false;
				})
			},
			getStatusString(e) {
				// 0=待支付,1=待打印,2=待收货,3=已完成,4=退款中,5=已驳回,6=退款成功
				let s_ = '';
				let arr = [{
					id: 0,
					name: '待支付'
				}, {
					id: 1,
					name: '待打印'
				}, {
					id: 2,
					name: '待收货'
				}, {
					id: 3,
					name: '已完成'
				}, {
					id: 4,
					name: '退款中'
				}, {
					id: 5,
					name: '已驳回'
				}, {
					id: 6,
					name: '退款成功'
				}]

				arr.forEach((n) => {
					if (n.id == e) {
						s_ = n.name
					}
				})

				return s_
			},
			getLog() {
				this.logisShow = true;
				this.$refs.logView.getExpress();
			},
			//
			getSubmit1() {
				// 立即支付
				this.isPayShow = true;
				this.payPrice = this.detailInfo.total_price;
			},
			getChoosePay(e) {
				this.isPayShow = false;

				if (!this.isBtn) return

				this.isBtn = false;

				if (e == 0) {
					this.$refs.payView.wxPay(this.detailInfo.order_num, 'order');
				}
				if (e == 1) {
					let orderNumber = this.detailInfo.order_num;
					getApp().getNavigateTo('/pages/index/taobaoPay?orderNumber=' + orderNumber);
				}
				if (e == 2) {
					let orderNumber = this.detailInfo.order_num;
					getApp().getNavigateTo('/pages/index/pddPay?orderNumber=' + orderNumber);
				}

				setTimeout(() => {
					this.isBtn = true;
				}, 500)
			},
			getWxPaySuccess() {
				this.getDetail();
				uni.setStorageSync('orderUp', true);
			},
			getClear1(item) {
				// 取消订单
				this.$http.post(this.$api.cancelOrder, {
					id: item.id
				}).then(res => {
					this.orderIsShow = false;
					this.getDetail();
					uni.setStorageSync('orderUp', true);
				})
			},
			getSubmit2() {
				// 确认收货
				this.$http.post(this.$api.confirmOrder, {
					id: this.detailInfo.id
				}).then(res => {
					this.getDetail();
					uni.setStorageSync('orderUp', true);
				})
			},
			getClear3() {
				// 申请退款
				let ids = this.detailInfo.id;
				getApp().getNavigateTo('/pages/my/refund?type=1&id=' + ids);
			},
			// 复制订单号
			getCopyOrder(order) {
				uni.setClipboardData({
					data: order, // 复制的文本内容
					success(res) {
						getApp().getMsg('复制成功', 'success');
					},
					fail(err) {
						getApp().getMsg('复制失败，请重试');
					}
				});
			},
			getWxPay(order) {
				let self = this;
				this.$http.post(this.$api.pay, {
					order_num: order
				}).then(res => {
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: res.data.timeStamp,
						nonceStr: res.data.nonceStr,
						package: res.data.package,
						signType: res.data.signType,
						paySign: res.data.paySign,
						success: function() {
							getApp().getMsg('支付成功', 'success');
							self.getDetail();
							uni.setStorageSync('orderUp', true);
						},
						fail: function(err) {
							getApp().getMsg('您放弃了支付');
						}
					});
				})
			},
			// 修改地址
			getAddress(detailInfo) {
				getApp().getNavigateTo('/pages/my/orderAddress?detail=true&order_id=' + detailInfo.id)
			}
		}
	}
</script>

<style lang="less">
	.adress_wrapper {
		display: flex;
	}

	.main,
	.order,
	.adress_wrapper,
	.wuliu_wrapper {
		padding: 32rpx;
		margin: 32rpx 0;
		border-radius: 16rpx;
		background-color: #fff;
	}

	.adress_right,
	.adress_left {
		height: 1;
	}
	
	.adress_right {
		margin-left: 46rpx;
	}

	.adress_right view {
		width: 100rpx;
		height: 52rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		border: 1px solid #E8E8E8;
		border-radius: 80rpx;
	}

	.wuliu_wrapper {
		padding-left: 26rpx !important;
	}

	.line1 {
		width: 1px;
		height: calc(100% - 26rpx);
		background-color: #E8E8E8;
		margin: 0 auto;
	}

	.line2 {
		width: 1px;
		height: 16rpx;
		background-color: #E8E8E8;
		margin: 0 auto;
	}

	.p_copy {
		margin: 0 0 0 20rpx;
		border-radius: 32rpx;
		padding: 8rpx 16rpx;
		color: #05B570;
		border: 1px solid #05B570;
	}
</style>
